<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .container {
        color: #fff;
        margin: 100px auto;
        height: 50px;
        width: 500px;
        background-color: rgba(0, 0, 0, 0.711);
        border-radius: 10px;
        padding-top: 10px;
        padding-left: 20px;
        position: relative;
        font-size: 13px;
      }
      .time{
        position: absolute;
        left: 65px;
      }
      .control{
        cursor: pointer;
        position: absolute;
        top: 24px;
      }
      .totalProgress{
        cursor: pointer;
        height: 8px;
        width: 440px;
        border-radius: 10px;
        background-color: #fff;
        position: absolute;
        top: 30px;
        left:65px
      }
      .currentProgress{
        height: 100%;
        width: 0;
        background-color: #ccc;
        display: flex;
        /* justify-content: right; */
        position: relative;
        align-items: center;
      }
      .point{
        width: 10px;
        height: 10px; 
        /* border-radius: 50%; */
        position: absolute;
        right:-5px;
        background-color: #ccc;
      }
    </style>
  </head>
  <body>
    <!-- 进度条的实现 -->
    <div class="container">
      <div class="time">
        <span class="currentTime">00:00</span>/
        <span class="totalTime">00:00</span>
      </div>
      <div class="control">
        <span class="action1" style="display: block;">开始</span>
        <span class="paused1" style="display: none;">暂停</span>
      </div>
      <div class="totalProgress">
        <div class="currentProgress">
          <div class="point"></div>
        </div>
      </div>
    </div>
    <audio class="audio" src="https://music.163.com/song/media/outer/url?id=28341146.mp3"></audio>
    <script>
      let audio = document.querySelector('.audio')
      let control = document.querySelector('.control')
      let totalProgress = document.querySelector('.totalProgress')
      let currentProgress = document.querySelector('.currentProgress')
      let container = document.querySelector('.container')
      let totalTime = document.querySelector('.totalTime')
      let currentTime = document.querySelector('.currentTime')
      let action1 = document.querySelector('.action1')
      let paused1 = document.querySelector('.paused1')
      let point = document.querySelector('.point')
      var time
      var timer
      var timer2
      control.addEventListener('click',()=>{
        if(audio.paused){
          audio.play()
          audio.volum = 0.01
          action1.style.display = 'none'
          paused1.style.display = 'block'
          totalTime.innerHTML = handlerTime(audio.duration)
          // 这利用了两个定时器分别控制时间的增长和进度条的变化 ，方便后期我们拖拽
          //  可以分别处理两个，这样可以实现在拖拽进度条的过程中暂停进度条变化的定时器
          //    而不影响到时间的变化和播放
          timer2 = setInterval(()=>{
            time = audio.currentTime
            currentTime.innerHTML = handlerTime(time)
          },100)
          timer = setInterval(()=>{
            // 更改进度条
            currentProgress.style.width =  (audio.currentTime/audio.duration)*100+'%'
          },100)
        }else{
          audio.pause()
          action1.style.display = 'block'
          paused1.style.display = 'none'
          clearInterval(timer)
          clearInterval(timer2)
        }
      })
      totalProgress.addEventListener('click',(ev)=>{
        let radio = getRadios(ev)
        // 点击改变时间
        currentProgress.style.width = radio*100 + '%'
        audio.currentTime = audio.duration * radio
      })
      // 实现拖拽进度条
      point.onmousedown = function(){
        document.onmousemove = function(event){
          let X = event.clientX - totalProgress.offsetLeft - container.offsetLeft
          if(X>=0 && X<totalProgress.offsetWidth){
            let bili = X/totalProgress.offsetWidth
            currentProgress.style.width = bili*100 + '%'
            // audio.currentTime = audio.duration * bili
            clearInterval(timer)
          }
        }
        document.onmouseup = function(e){
          let X = e.pageX-totalProgress.offsetLeft - container.offsetLeft
          audio.currentTime = audio.duration * X/totalProgress.offsetWidth
          time = audio.currentTime
          timer = setInterval(()=>{
            currentTime.innerHTML = handlerTime(time)
            // 更改进度条
            currentProgress.style.width =  (audio.currentTime/audio.duration)*100+'%'
          },100)
          // 取消移动事件
          document.onmousemove = null;
          //取消document.onmoudedown事件
          document.onmouseup = null
        }
      }
      // 处理总时长
      function handlerTime(time){
        // return Math.floor(time/60)+':' + Math.ceil(time%60)
        var M = Math.floor(time/60)
        var S = Math.floor(time % 60)
        time = Math.floor(time)
        var formaTime
        if(time<10){
          formaTime = '00:0' + time
        }else if(time<60){
          formaTime = '00:' + time
        }else{
          if(M<10){
            M = '0'+M
          }
          if(S<10){
            S = '0'+S
          }
          formaTime = M+':'+S
        }
        return formaTime
      }
      // 获得进度条百分比
      function getRadios(ev){
        // 进度条总宽度
        let totalWidth = totalProgress.offsetWidth
        // 获取总进度条距离容器左侧的距离
        let left = totalProgress.offsetLeft
        // 获取总容器的偏移量
        let totalLeft = container.offsetLeft
        // 点击的坐标
        let X = ev.pageX
        let x = X - left - totalLeft
        return x/totalWidth
      }
    </script>
  </body>
</html>
